<!--thread.php 的顶部和底部操作区-->
<script setup>
import {ElementUtils} from "@/assets/js/ElementUtils";
import {PostUtils} from "@/assets/js/PostUtils";
import {routeNameIn} from "@/assets/js/routerUtils";
import {setupMapGetters, setupMapMutations, setupMapState} from "@/assets/js/vuexUtils";
import Pagination from "@/components/common/Pagination.vue";
import {routeNames} from "@/router";
import {PostAction} from "@ginstone/nga-api/dist/src/enums/PostAction";
import {NukeApi} from "@ginstone/nga-api/dist/src/method/NukeApi";
import {FavorForumEditParam} from "@ginstone/nga-api/dist/src/params/NukeParams";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import BreadcrumbNav from "@/components/read/BreadcrumbNav.vue";
import SearchPopover from "@/components/common/popover/SearchPopover.vue";
import {ForumType} from "@ginstone/nga-api/dist/src/enums/ForumType";

const {currentFavorForum} = setupMapState("Account", ["currentFavorForum"])
const getClient = setupMapGetters("Account", ["getClient"]).getClient.value
const {accountFavorForumRefresh} = setupMapMutations("Account", ['accountFavorForumRefresh'])

const {recommend, forumList, favor, forumSearch, colList, colSearch,} = routeNames.thread
const {replies, topic} = routeNames.user

const {currentUid: account} = setupMapState("Account", ['currentUid']);

const props = defineProps({
  pageData: Object,
  // 响应数据
  data: Object,
  forum: Object,
  // 导航栏位置
  placement: {
    type: String,
    default: 'top',
    validator(value) {
      return ['top', 'bottom'].includes(value)
    }
  },
  // 热键配置
  hotKey: Array,
})
const route = useRoute()
const router = useRouter()
const store = useStore();
const showDialog = (name, data) => store.commit("Dialog/showDialog", {name, data})
defineEmits(["refresh"])

const favorForumEdit = (action) => {
  const type = routeNameIn(route, forumList, recommend) ? "forum" : "col";
  NukeApi.favorForumEdit(getClient(), new FavorForumEditParam(action, type, Number(route.params.id))).then(res => {
    ElementUtils.notice({message: res})
    accountFavorForumRefresh()
  })
}
const getParams = ({forumId: fid, colTid: stid}) => {
  return {fid, stid}
}

const postNew = ({forumId: fid, colTid: stid}) => {
  const name = routeNames.post.new;
  const params = {fid}
  const query = {account: account.value}
  if (stid) query.stid = stid;
  router.push({name, params, query})
}

const getSearchForums = (forum) => {
  const arr = []
  const {colTid, colTitle, forumId, forumName} = forum
  // 当前版面
  arr.push({id: forumId, name: forumName, type: ForumType.FORUM})
  // 如果存在合集，加入
  if (colTid) {
    arr.push({id: colTid, name: colTitle, type: ForumType.COLLECTION})
  }
  return arr
}


</script>

<template>
  <div v-show="pageData">
    <div v-if="placement==='top'">
      <BreadcrumbNav :data="data"/>
    </div>
    <!--翻页器-->
    <div class="operation-block" style="text-align: left">
      <pagination :data="pageData" @refresh="$emit('refresh')"/>
    </div>
    <!--操作区-->
    <div class="operation-block" style="text-align: right">
      <el-button-group size="small" type="primary">
        <el-button v-if="data && data.hasOwnProperty('blockedTopics') && data.blockedTopics.length>0"
                   @click="showDialog('blockedTopics',data.blockedTopics)">
          已屏蔽({{ data.blockedTopics.length }})
        </el-button>
        <el-button v-if="forum && forum.hasOwnProperty('toppedTopicId')" @click="showDialog('ToppedTopic',forum.toppedTopicId)">版头</el-button>
        <el-button v-if="forum && forum.hasOwnProperty('subForums')" @click="showDialog('sub_forum',forum)">子版面</el-button>
        <el-button v-if="hotKey" @click="showDialog('hotKey',hotKey)">热键</el-button>
        <!-- 搜索-->
        <search-popover v-if="forum && routeNameIn($route,forumList,colList,recommend,forumSearch,colSearch)" :data="getSearchForums(forum)"
                        :recommend="($route.name === routeNames.thread.recommend) || ($route.query.recommend === '1')"
                        :search-key="$route.params.keyword"
        >
          <el-button>搜索</el-button>
        </search-popover>
        <el-button v-if="routeNameIn($route,forumList,recommend)" @click="showDialog('privilegeList',Number($route.params.id))">权限</el-button>
        <el-button v-if="routeNameIn($route,forumList)"
                   @click="$router.push({name:recommend,query:{account}})">
          精华区
        </el-button>
        <el-button v-if="routeNameIn($route,recommend)"
                   @click="$router.push({name:forumList,query:{account}})">
          回版面
        </el-button>

        <template v-if="routeNameIn($route,forumList,colList,recommend)">
          <!--关注、取消关注-->
          <el-button v-if="currentFavorForum&&currentFavorForum.map(i=>i.id).includes(Number($route.params.id))" type="danger" @click="favorForumEdit('del')">取关
          </el-button>
          <el-button v-else type="success" @click="favorForumEdit('add')">关注</el-button>
        </template>
        <el-button type="success" @click="$emit('refresh')">刷新</el-button>
        <!--发帖-->
        <el-tooltip v-if="forum&&routeNameIn($route,forumList,colList,recommend)">
          <el-button type="success" @click="postNew(forum)">发帖</el-button>
          <template #content>
            <el-link :href="PostUtils.buildOfficialUrl(PostAction.NEW,getParams(forum))" target="_blank" type="primary">官方地址</el-link>
          </template>
        </el-tooltip>
      </el-button-group>
    </div>

    <div v-if="placement==='bottom'">
      <BreadcrumbNav :data="data"/>
    </div>
  </div>
</template>

<style scoped>
.operation-block {
  display: inline-block;
  width: 50%;
}
</style>